JavaScript λͺ¨λ νλλ μ΄μ λ°νμ λ μ§μ€νΈλ¦¬λ₯Ό ν΅ν΄ λμ λͺ¨λ λ°κ²¬μ νμνμ¬ νμ₯ κ°λ₯νκ³ μ μλ ₯ μλ λ§μ΄ν¬λ‘νλ‘ νΈμλ μν€ν μ²λ₯Ό ꡬννμΈμ. ꡬν, μ΄μ λ° κ³ κΈ μ¬μ© μ¬λ‘λ₯Ό μμ보μΈμ.
JavaScript λͺ¨λ νλλ μ΄μ λ°νμ λ μ§μ€νΈλ¦¬: λμ λͺ¨λ λ°κ²¬
Webpack 5μ λμ λ κ°λ ₯ν κΈ°λ₯μΈ λͺ¨λ νλλ μ΄μ μ JavaScript μ ν리μΌμ΄μ , νΉν λ§μ΄ν¬λ‘νλ‘ νΈμλ μμμ ꡬμΆνκ³ λ°°ν¬νλ λ°©μμ νλͺ μ μΌμΌμΌ°μ΅λλ€. μ΄λ λ 립μ μΌλ‘ κ΅¬μΆ λ° λ°°ν¬λ μ¬λ¬ μ ν리μΌμ΄μ μ΄ λ°νμμ μ½λμ κΈ°λ₯μ 곡μ ν μ μλλ‘ ν©λλ€. μ μ λͺ¨λ νλλ μ΄μ ꡬμ±μ΄ μΌλ°μ μ΄μ§λ§, μ§μ ν νμ λ°νμ λ μ§μ€νΈλ¦¬λ₯Ό μ¬μ©ν λμ λͺ¨λ λ°κ²¬μ μμ΅λλ€. μ΄ κΈμ λͺ¨λ νλλ μ΄μ μ μν λ°νμ λ μ§μ€νΈλ¦¬μ κ°λ μ κΉμ΄ νκ³ λ€μ΄, κ·Έ ꡬν, μ΄μ λ° κ³ κΈ μ¬μ© μ¬λ‘λ₯Ό νꡬν©λλ€.
λ°νμ λ μ§μ€νΈλ¦¬λ 무μμΈκ°μ?
λͺ¨λ νλλ μ΄μ μ λ§₯λ½μμ λ°νμ λ μ§μ€νΈλ¦¬λ μ¬μ© κ°λ₯ν μ격 λͺ¨λμ λν μ 보λ₯Ό μ 곡νλ μ€μ λλ ν 리 λλ μλΉμ€ μν μ ν©λλ€. μ ν리μΌμ΄μ κ΅¬μ± λ΄μ μ격 λͺ¨λμ μμΉλ₯Ό νλμ½λ©νλ λμ , λ°νμμ λ μ§μ€νΈλ¦¬μ 쿼리νμ¬ νμν λͺ¨λμ λ°κ²¬νκ³ λ‘λν©λλ€. μ΄λ¬ν λμ μ κ·Ό λ°©μμ λͺ κ°μ§ μ΄μ μ μ 곡ν©λλ€:
- κ²°ν©λ κ°μ: μ ν리μΌμ΄μ μ΄ μ격 λͺ¨λμ νΉμ λ²μ μ΄λ μμΉμ λ λ°μ νκ² κ²°ν©λ©λλ€.
- νμ₯μ±: μλΉνλ μ ν리μΌμ΄μ μ μ¬λ°°ν¬νμ§ μκ³ λ μ격 λͺ¨λμ μΆκ°, μ κ±° λλ μ λ°μ΄νΈνκΈ° μ½μ΅λλ€.
- μ μμ±: λ°νμ 쑰건μ λ°λΌ λ€λ₯Έ λͺ¨λμ μ 곡νμ¬ λμ κΈ°λ₯ ν κΈ λ° A/B ν μ€νΈλ₯Ό κ°λ₯νκ² ν©λλ€.
- 볡μλ ₯: νλμ μ격 λͺ¨λμ μ¬μ©ν μ μλ κ²½μ°, λ μ§μ€νΈλ¦¬κ° λ체 μμΉ λλ λ²μ μ μ 곡ν μ μμ΅λλ€.
λ°νμ λ μ§μ€νΈλ¦¬λ₯Ό μ¬μ©νλ μ΄μ
μ ν μΉ΄νλ‘κ·Έ, μ₯λ°κ΅¬λ, μ¬μ©μ κ³μ λ± μ¬λ¬ λ§μ΄ν¬λ‘νλ‘ νΈμλλ‘ κ΅¬μ±λ λκ·λͺ¨ μ μμκ±°λ νλ«νΌμ μκ°ν΄ 보μΈμ. κ° λ§μ΄ν¬λ‘νλ‘ νΈμλλ λ 립μ μΌλ‘ κ°λ°λκ³ λ°°ν¬λ©λλ€. λ°νμ λ μ§μ€νΈλ¦¬κ° μμΌλ©΄ κ° λ§μ΄ν¬λ‘νλ‘ νΈμλλ λ€λ₯Έ λ§μ΄ν¬λ‘νλ‘ νΈμλμμ μ¬μ©νλ 곡μ λͺ¨λ λλ κ΅¬μ± μμμ μ νν μμΉμ λ²μ μ μμμΌ ν©λλ€. μ΄λ λ°μ ν κ²°ν©μ λ§λ€κ³ μ λ°μ΄νΈλ₯Ό μ΄λ ΅κ² λ§λλλ€. μλ₯Ό λ€μ΄, 곡μ UI κ΅¬μ± μμλ₯Ό μ λ°μ΄νΈνλ €λ©΄ ν΄λΉ κ΅¬μ± μμμ μμ‘΄νλ λͺ¨λ λ§μ΄ν¬λ‘νλ‘ νΈμλλ₯Ό μ¬λ°°ν¬ν΄μΌ ν©λλ€.
νμ§λ§ λ°νμ λ μ§μ€νΈλ¦¬λ₯Ό μ¬μ©νλ©΄ λ§μ΄ν¬λ‘νλ‘ νΈμλλ νμν κ΅¬μ± μμμ μμΉμ λ²μ μ λ μ§μ€νΈλ¦¬μ λ¨μν 쿼리ν©λλ€. κ·Έλ¬λ©΄ λ μ§μ€νΈλ¦¬κ° μ μ ν μ 보λ₯Ό μ 곡νμ¬ λ§μ΄ν¬λ‘νλ‘ νΈμλκ° κ΅¬μ± μμλ₯Ό λμ μΌλ‘ λ‘λν μ μλλ‘ ν©λλ€. μ΄λ¬ν κ²°ν©λ κ°μλ λ 립μ μΈ μ λ°μ΄νΈλ₯Ό κ°λ₯νκ² νκ³ λ³κ²½μΌλ‘ μΈν μ€λ₯ λ°μ μνμ μ€μ λλ€.
λ°νμ λ μ§μ€νΈλ¦¬ ꡬν
λ°νμ λ μ§μ€νΈλ¦¬λ₯Ό ꡬννλ λ°©λ²μ κ°λ¨ν JSON νμΌλΆν° λ²μ κ΄λ¦¬ λ° λΌμ°ν κΈ°λ₯μ κ°μΆ μ κ΅ν μλΉμ€μ μ΄λ₯΄κΈ°κΉμ§ λ€μν©λλ€. λ€μμ μΉ μλ²μ νΈμ€ν λ κ°λ¨ν JSON νμΌμ μ¬μ©νλ κΈ°λ³Έ μμμ λλ€:
1. λ μ§μ€νΈλ¦¬ μ μ (registry.json):
\n\n{\n \"modules\": {\n \"@my-org/product-card\": {\n \"1.0.0\": \"https://cdn.example.com/product-card/1.0.0/remoteEntry.js\",\n \"1.1.0\": \"https://cdn.example.com/product-card/1.1.0/remoteEntry.js\"\n },\n \"@my-org/checkout-button\": {\n \"2.0.0\": \"https://cdn.example.com/checkout-button/2.0.0/remoteEntry.js\"\n }\n }\n}\n\n
μ΄ JSON νμΌμ μ¬μ© κ°λ₯ν λͺ¨λκ³Ό ν΄λΉ URLμ μ μν©λλ€. κ° λͺ¨λμλ ν΄λΉ `remoteEntry.js` νμΌμ κ°λ¦¬ν€λ λ²μ λ³ νλͺ©μ΄ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ λ²μ κ΄λ¦¬κ° κ°λ₯νλ©° νμν κ²½μ° μ½κ² λ‘€λ°±ν μ μμ΅λλ€.
2. μλΉνλ μ ν리μΌμ΄μ :
\n\nasync function loadRemote(moduleName, version) {\n const registryUrl = 'https://example.com/registry.json';\n const response = await fetch(registryUrl);\n const registry = await response.json();\n\n const moduleInfo = registry.modules[moduleName];\n if (!moduleInfo) {\n throw new Error(`Module \"${moduleName}\" not found in registry.`);\n }\n\n const moduleUrl = moduleInfo[version];\n if (!moduleUrl) {\n throw new Error(`Version \"${version}\" for module \"${moduleName}\" not found.`);\n }\n\n return new Promise((resolve, reject) => {\n const script = document.createElement('script');\n script.src = moduleUrl;\n script.type = 'text/javascript';\n script.async = true;\n script.onload = () => {\n // Module is loaded, you can now access it using window[moduleName]\n resolve(window[moduleName]);\n };\n script.onerror = (error) => {\n console.error(`Error loading module ${moduleName} from ${moduleUrl}:`, error);\n reject(error);\n };\n document.head.appendChild(script);\n });\n}\n\n// Example usage:\nloadRemote('@my-org/product-card', '1.0.0')\n .then((module) => {\n // Use the loaded module\n const ProductCard = module.ProductCard;\n const productCardInstance = new ProductCard({ name: 'Example Product' });\n document.getElementById('product-card-container').appendChild(productCardInstance.render());\n })\n .catch((error) => {\n console.error('Failed to load product card:', error);\n });\n\n
μ΄ μ½λ μ€λν«μ λ μ§μ€νΈλ¦¬λ₯Ό κ°μ Έμ μνλ λͺ¨λκ³Ό λ²μ μ μ°Ύκ³ μ격 μνΈλ¦¬λ₯Ό λμ μΌλ‘ λ‘λνλ λ°©λ²μ 보μ¬μ€λλ€. λν κΈ°λ³Έμ μΈ μ€λ₯ μ²λ¦¬λ ν¬ν¨λμ΄ μμ΅λλ€.
3. Webpack κ΅¬μ± (μ격 μ ν리μΌμ΄μ ):
\n\nconst { ModuleFederationPlugin } = require('webpack').container;\n\nmodule.exports = {\n //...\n plugins: [\n new ModuleFederationPlugin({\n name: '@my-org/product-card',\n filename: 'remoteEntry.js',\n exposes: {\n './ProductCard': './src/ProductCard',\n },\n // shared: { ... }, // Shared dependencies\n }),\n ],\n};\n\n
μ΄κ²μ `ProductCard` μ»΄ν¬λνΈλ₯Ό λ ΈμΆνλ μ격 μ ν리μΌμ΄μ μ μν νμ€ λͺ¨λ νλλ μ΄μ Webpack ꡬμ±μ λλ€. μ¬κΈ°μ ν΅μ¬μ `filename`μ΄ λ μ§μ€νΈλ¦¬μμ μ°Έμ‘°λλ νμΌμΈ `remoteEntry.js`λΌλ κ²μ λλ€.
κ³ κΈ μ¬μ© μ¬λ‘
μμ κ°λ¨ν μμλ λ 볡μ‘ν μλ리μ€λ₯Ό μ²λ¦¬νλλ‘ νμ₯λ μ μμ΅λλ€:
λ²μ κ΄λ¦¬
λ μ§μ€νΈλ¦¬λ κ° λͺ¨λμ μ¬λ¬ λ²μ μ μ μ₯ν μ μμΌλ―λ‘, μλΉνλ μ ν리μΌμ΄μ μ΄ μνλ λ²μ μ μ§μ ν μ μμ΅λλ€. μ΄λ νΈνμ±μ μ μ§νκ³ μ μ§μ μΈ μ κ·Έλ μ΄λλ₯Ό νμ©νλ λ° μ€μν©λλ€.
μμ: λ μ§μ€νΈλ¦¬μλ λ²μ μ λ³΄κ° ν¬ν¨λ μ μμΌλ©°, μλΉνλ μ ν리μΌμ΄μ μ νΉμ λ²μ λλ νμ© κ°λ₯ν λ²μ λ²μ(μ: '>=1.0.0 <2.0.0')λ₯Ό μμ²ν μ μμ΅λλ€. κ·Έλ¬λ©΄ λ μ§μ€νΈλ¦¬κ° μμ²μ λ°λΌ μ μ ν URLμ λ°νν μ μμ΅λλ€.
λΌμ°ν λ° λ‘λ λ°Έλ°μ±
λ μ§μ€νΈλ¦¬λ κ°μ©μ± λλ μ§λ¦¬μ μμΉμ λ°λΌ λ€λ₯Έ μλ²λ‘ μμ²μ μ λ¬νλ λ‘λ λ°Έλ°μ μν μ ν μ μμ΅λλ€. μ΄λ μ±λ₯κ³Ό μμ μ±μ ν₯μμν¬ μ μμ΅λλ€.
μμ: λ μ§μ€νΈλ¦¬μλ λμΌν λͺ¨λμ λν΄ μ¬λ¬ URLμ΄ μμ μ μμΌλ©°, κ° URLμ λ€λ₯Έ CDN λλ μλ²λ₯Ό κ°λ¦¬ν΅λλ€. λ μ§μ€νΈλ¦¬λ λ‘λ λ°Έλ°μ± μκ³ λ¦¬μ¦μ μ¬μ©νμ¬ μ¬μ© κ°λ₯ν μλ² μ λ°μ κ±Έμ³ μμ²μ λΆμ°μν¬ μ μμ΅λλ€.
μΈμ¦ λ° κΆν λΆμ¬
λ μ§μ€νΈλ¦¬λ μΈμ¦ λ° κΆν λΆμ¬ μ μ± μ μ μ©νμ¬ μΉμΈλ μ ν리μΌμ΄μ λ§ νΉμ λͺ¨λμ μ κ·Όν μ μλλ‘ λ³΄μ₯ν μ μμ΅λλ€. μ΄λ λ―Όκ°ν μ½λμ λ°μ΄ν°λ₯Ό 보νΈνλ λ° νμμ μ λλ€.
μμ: λ μ§μ€νΈλ¦¬λ λͺ¨λ μ 보μ μ κ·ΌνκΈ° μν΄ API ν€ λλ ν ν°μ μꡬν μ μμ΅λλ€. μλΉνλ μ ν리μΌμ΄μ μ λͺ¨λ URLμ κ²μνκΈ° μν΄ μ¬λ°λ₯Έ μ격 μ¦λͺ μ μ 곡ν΄μΌ ν©λλ€.
κΈ°λ₯ ν κΈ
λ μ§μ€νΈλ¦¬λ κΈ°λ₯ ν κΈμ ꡬννλ λ° μ¬μ©λ μ μμΌλ©°, μ ν리μΌμ΄μ μ μ¬λ°°ν¬νμ§ μκ³ λ κΈ°λ₯μ λμ μΌλ‘ νμ±ννκ±°λ λΉνμ±νν μ μμ΅λλ€. μ΄λ A/B ν μ€νΈ λ° μ κΈ°λ₯μ μ μ§μ μΌλ‘ μΆμνλ λ° μ μ©ν©λλ€.
μμ: λ μ§μ€νΈλ¦¬λ λ€λ₯Έ νκ²½ λλ μ¬μ©μ κ·Έλ£Ήμ λν΄ λ€λ₯Έ ꡬμ±μ κ°μ§ μ μμ΅λλ€. μ¬μ©μμ μ μ λλ νκ²½μ λ°λΌ λ μ§μ€νΈλ¦¬λ λμΌν λͺ¨λμ λν΄ λ€λ₯Έ URLμ λ°ννμ¬ νΉμ κΈ°λ₯μ ν¨κ³Όμ μΌλ‘ νμ±ννκ±°λ λΉνμ±νν μ μμ΅λλ€.
λμ λͺ¨λ ꡬμ±
λ μ§μ€νΈλ¦¬λ λ°νμμ λ‘λλλ λͺ¨λμ΄ λ°νμ 쑰건 λλ μ¬μ©μ μνΈ μμ©μ λ°λΌ λ¬λΌμ§λ λμ λͺ¨λ ꡬμ±μ μ©μ΄νκ² ν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ κ³ λλ‘ μ μ κ°λ₯νκ³ κ°μΈνλ μ ν리μΌμ΄μ μ λ§λ€ μ μμ΅λλ€.
μμ: μ¬μ©μμ μ νΈλ λλ νμ¬ νμ΄μ§μ 컨ν μ€νΈμ λ°λΌ μ ν리μΌμ΄μ μ λ‘λν μ μ ν λͺ¨λμ λ μ§μ€νΈλ¦¬μ 쿼리ν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ κ³ λλ‘ λ§μΆ€νλ μ¬μ©μ κ²½νμ μ 곡ν μ μμ΅λλ€.
κ³ λ € μ¬ν λ° λͺ¨λ² μ¬λ‘
λ°νμ λ μ§μ€νΈλ¦¬λ μλΉν μ΄μ μ μ 곡νμ§λ§, λ€μ μμλ₯Ό κ³ λ €νλ κ²μ΄ μ€μν©λλ€:
- μ±λ₯: λ μ§μ€νΈλ¦¬ μ 보λ₯Ό κ°μ Έμ€λ κ²μ μΆκ° λ€νΈμν¬ μμ²μ λ°μμν΅λλ€. μ§μ° μκ°μ μ΅μννκΈ° μν΄ λ μ§μ€νΈλ¦¬ λ°μ΄ν°λ₯Ό μΊμ±νλ κ²μ κ³ λ €νμμμ€.
- 볡μ‘μ±: λ°νμ λ μ§μ€νΈλ¦¬λ₯Ό ꡬννκ³ μ μ§ κ΄λ¦¬νλ κ²μ μν€ν μ²μ 볡μ‘μ±μ λν©λλ€. μ΄ μ κ·Ό λ°©μμ μ±ννκΈ° μ μ μ₯λ¨μ μ μ μ€νκ² νκ°νμμμ€.
- 보μ: λ¬΄λ¨ μ κ·Ό λ° μμ μΌλ‘λΆν° λ μ§μ€νΈλ¦¬λ₯Ό 보νΈνμμμ€. μ μ ν μΈμ¦ λ° κΆν λΆμ¬ λ©μ»€λμ¦μ ꡬννμμμ€.
- μ€λ₯ μ²λ¦¬: λ μ§μ€νΈλ¦¬λ₯Ό μ¬μ©ν μ μκ±°λ λͺ¨λμ λ‘λν μ μλ κ²½μ°λ₯Ό μ°μνκ² μ²λ¦¬νκΈ° μν΄ κ°λ ₯ν μ€λ₯ μ²λ¦¬λ₯Ό ꡬννμμμ€.
- νμ₯μ±: λ μ§μ€νΈλ¦¬κ° μμλλ λ‘λλ₯Ό μ²λ¦¬νκ³ μ ν리μΌμ΄μ μ΄ μ±μ₯ν¨μ λ°λΌ νμ₯ν μ μλμ§ νμΈνμμμ€. μ±λ₯ ν₯μμ μν΄ λΆμ° λ°μ΄ν°λ² μ΄μ€ λλ μΊμ± κ³μΈ΅ μ¬μ©μ κ³ λ €νμμμ€.
- μ€μ μ§μ€μ κ΄λ¦¬: μΌκ΄μ±μ 보μ₯νκ³ μΆ©λμ νΌνκΈ° μν΄ λ μ§μ€νΈλ¦¬ μ£Όλ³μ μ μ ν κ±°λ²λμ€ λ° λ³κ²½ κ΄λ¦¬ νλ‘μΈμ€λ₯Ό ꡬννμμμ€.
- λͺ¨λν°λ§: λ μ§μ€νΈλ¦¬μ μ±λ₯κ³Ό κ°μ©μ±μ λͺ¨λν°λ§νμ¬ λ¬Έμ λ₯Ό μ¬μ μ μλ³νκ³ ν΄κ²°νμμμ€.
κ°λ¨ν JSON λ μ§μ€νΈλ¦¬μ λν λμ
κ°λ¨ν JSON νμΌμ΄ μ’μ μΆλ°μ μν μ νμ§λ§, νλ‘λμ νκ²½μμλ μ’ μ’ λ κ°λ ₯ν μ루μ μ΄ νμν©λλ€. λ€μ λμλ€μ κ³ λ €νμμμ€:
- λ§μΆ€ν API μλΉμ€: Node.js, Python λλ Goλ‘ κ΅¬μΆλ μ μ© API μλΉμ€λ λ μ§μ€νΈλ¦¬ λ‘μ§μ λν λ ν° μ μ°μ±κ³Ό μ μ΄λ₯Ό μ 곡ν©λλ€. μ΄λ₯Ό ν΅ν΄ μΈμ¦, κΆν λΆμ¬, λ²μ κ΄λ¦¬ λ° λ‘λ λ°Έλ°μ±κ³Ό κ°μ κΈ°λ₯μ μ¬μ©ν μ μμ΅λλ€.
- μλΉμ€ λμ€μ»€λ²λ¦¬ λꡬ (μ: Consul, etcd, ZooKeeper): μ΄λ¬ν λꡬλ μλΉμ€ ꡬμ±μ κ΄λ¦¬νκ³ λμ μλΉμ€ λμ€μ»€λ²λ¦¬λ₯Ό μ 곡νλλ‘ μ€κ³λμμ΅λλ€. λͺ¨λ νλλ μ΄μ λ μ§μ€νΈλ¦¬ λ°μ΄ν°λ₯Ό μ μ₯νκ³ κ΄λ¦¬νλ λ° μ¬μ©λ μ μμ΅λλ€.
- ν΄λΌμ°λ κΈ°λ° κ΅¬μ± μλΉμ€ (μ: AWS AppConfig, Azure App Configuration, Google Cloud Config): μ΄λ¬ν μλΉμ€λ λͺ¨λ νλλ μ΄μ λ μ§μ€νΈλ¦¬λ₯Ό ν¬ν¨νμ¬ μ ν리μΌμ΄μ ꡬμ±μ κ΄λ¦¬νλ μ€μ μ§μ€μμ νμ₯ κ°λ₯ν λ°©λ²μ μ 곡ν©λλ€.
- κΈ°μ‘΄ λ§μ΄ν¬λ‘μλΉμ€ μ€μΌμ€νΈλ μ΄μ νλ«νΌ (μ: Kubernetes): μ΄λ―Έ λ§μ΄ν¬λ‘μλΉμ€ μ€μΌμ€νΈλ μ΄μ νλ«νΌμ μ¬μ©νκ³ μλ€λ©΄, λͺ¨λ νλλ μ΄μ λ μ§μ€νΈλ¦¬λ₯Ό μν΄ λ΄μ₯λ μλΉμ€ λμ€μ»€λ²λ¦¬ λ° κ΅¬μ± κ΄λ¦¬ κΈ°λ₯μ νμ©ν μ μμ΅λλ€.
μμ: κΈλ‘λ² μ μμκ±°λ νλ«νΌ
μ¬λ¬ κ΅κ°μ μμ μ λ κΈλ‘λ² μ μμκ±°λ νλ«νΌμ μμν΄ λ³΄μμμ€. κ° κ΅κ°λ λ€λ₯Έ μ ν μΉ΄νλ‘κ·Έ, κ²°μ λ°©λ² λ° λ°°μ‘ μ΅μ μ κ°μ§ μ μμ΅λλ€. λ°νμ λ μ§μ€νΈλ¦¬λ μ¬μ©μμ μμΉ λ° μ νΈλμ λ°λΌ μ μ ν λͺ¨λμ λμ μΌλ‘ λ‘λνλ λ° μ¬μ©λ μ μμ΅λλ€.
μλ₯Ό λ€μ΄, λ μΌμ μλ μ¬μ©μλ λ μΌμ΄ μ€λͺ κ³Ό μ λ‘ν κ°κ²©μ΄ μλ μ ν μΉ΄νλ‘κ·Έλ₯Ό λ³Ό μ μκ³ , μΌλ³Έμ μλ μ¬μ©μλ μΌλ³Έμ΄ μ€λͺ κ³Ό μν κ°κ²©μ΄ μλ μ ν μΉ΄νλ‘κ·Έλ₯Ό λ³Ό μ μμ΅λλ€. λ°νμ λ μ§μ€νΈλ¦¬λ μ¬μ©μμ μμΉ λ° μ νΈλμ λ°λΌ λ‘λν λͺ¨λμ κ²°μ ν©λλ€.
λν, κ²°μ λͺ¨λμ μ¬μ©μμ μμΉμ λ°λΌ λμ μΌλ‘ μ νλ μ μμ΅λλ€. λ μΌμ μλ μ¬μ©μλ PayPal λλ μ μ© μΉ΄λλ‘ κ²°μ νλ μ΅μ μ λ³Ό μ μλ λ°λ©΄, μΌλ³Έμ μλ μ¬μ©μλ μ μ© μΉ΄λ λλ νΈμμ κ²°μ μ΅μ μ λ³Ό μ μμ΅λλ€.
μ΄λ¬ν μμ€μ λμ μ¬μ©μ μ μλ λ°νμ λ μ§μ€νΈλ¦¬ μμ΄λ λ¬μ±νκΈ° μ΄λ ΅μ΅λλ€.
κ²°λ‘
λ°νμ λ μ§μ€νΈλ¦¬λ JavaScript λͺ¨λ νλλ μ΄μ μμ λμ λͺ¨λ λ°κ²¬μ κ°λ₯νκ² νλ κ°λ ₯ν λꡬμ λλ€. μ΄λ κ²°ν©λ κ°μ, νμ₯μ±, μ μμ±, 볡μλ ₯ λ± μ¬λ¬ μ΄μ μ μ 곡ν©λλ€. λ°νμ λ μ§μ€νΈλ¦¬λ₯Ό ꡬννλ κ²μ μν€ν μ²μ 볡μ‘μ±μ λνμ§λ§, νΉν ν¬κ³ 볡μ‘ν μ ν리μΌμ΄μ μ κ²½μ° κ·Έ μ΄μ μ΄ λΉμ©λ³΄λ€ ν° κ²½μ°κ° λ§μ΅λλ€. μ΄ κΈμμ μ€λͺ λ μμΈλ€μ μ μ€νκ² κ³ λ €ν¨μΌλ‘μ¨ λ°νμ λ μ§μ€νΈλ¦¬λ₯Ό μ±κ³΅μ μΌλ‘ ꡬννκ³ λͺ¨λ νλλ μ΄μ μ λͺ¨λ μ μ¬λ ₯μ λ°νν μ μμ΅λλ€.
λ§μ΄ν¬λ‘νλ‘ νΈμλ μν€ν μ²κ° κ³μ λ°μ ν¨μ λ°λΌ λ°νμ λ μ§μ€νΈλ¦¬λ νμ₯ κ°λ₯νκ³ μ μλ ₯ μλ μΉ μ ν리μΌμ΄μ μ κ°λ₯νκ² νλ λ° μ μ λ μ€μν μν μ ν κ²μ λλ€. μ΄ κΈ°μ μ λ°μλ€μ΄κ³ νλ‘ νΈμλ κ°λ°μ λ―Έλλ₯Ό ꡬμΆνμμμ€.